<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加内容字段</title>
    <link rel="stylesheet" href="__COMMON__/dtree/dtree.css">
    <link rel="stylesheet" href="__COMMON__/dtree/font/dtreefont.css">
    <link rel="stylesheet" href="__COMMON__/css/simple.css">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
</head>
<body>

<form class="layui-form" action="" style="padding: 10px">
    <input type="hidden" name="model_id" value="{$model_id}"/>
    <div class="layui-form-item">
        <label class="layui-form-label"><em style="color: red">*</em> 字段标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" id="title">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><em style="color: red">*</em> 字段名称</label>
        <div class="layui-input-inline">
            <input type="text" value="" name="name" lay-verify="required" autocomplete="off" class="layui-input" onkeyup="this.value=this.value.replace(/[^0-9a-zA-Z_]/g,'');" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^0-9a-zA-Z_]/g,''));">
        </div>
        <div class="layui-form-mid layui-word-aux">只允许字母、数字和下划线的任意组合</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><em style="color: red">*</em> 字段类型</label>
        <div class="layui-input-inline">
            <select name="dtype" lay-verify="required" lay-filter="filter">
                {foreach name="dtype" item="vo" key="key"}
                <option value="{$key}">{$vo['title']}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="layui-form-item" id="dfvalue" style="display: none">
        <label class="layui-form-label"><em style="color: red">*</em> 默认值</label>
        <div class="layui-input-block">
            <textarea name="dfvalue" placeholder="如果定义字段类型为下拉框、单选项、多选项时，此处填写被选择的项目(用英文“,”分开，如“php,java,python”)" class="layui-textarea" id="d-area"></textarea>
        </div>
    </div>

    <div class="layui-form-item" id="dfvalue_unit" style="display: none">
        <label class="layui-form-label">数值单位</label>
        <div class="layui-input-inline">
            <input type="text" value="" name="dfvalue_unit" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">比如：元、个、件等等</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序值</label>
        <div class="layui-input-inline">
            <input type="text" name="sort_order" autocomplete="off" class="layui-input" value="100">
        </div>
    </div>

    <div class="layui-form-item" style="margin-top: 40px">
        <div class="layui-input-block">
            <button type="button" class="am-btn am-btn-success am-btn-sm" lay-submit lay-filter="subForm">立即提交</button>
            <button type="reset" class="am-btn am-btn-default am-btn-sm" >重置</button>
        </div>
    </div>
</form>

<script src="__COMMON__/jquery.min.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
<script>

    layui.use(['form', 'layer'], function() {
        var form = layui.form;
        var dtree = layui.dtree, layer = layui.layer;

        // 监听提交
        form.on('submit(subForm)', function(data) {

            $.post('{:url("modelField/add")}', data.field, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg);

                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.initTable();
                    }, 800);
                } else {
                    layer.msg(res.msg);
                }
            }, 'json');
            return false;
        });

        form.on('select(filter)', function(data) {
            var dtype = data.value;
            if (dtype == 'checkbox' || dtype == 'select' || dtype == 'radio') {
                $("#dfvalue").show();
                $("#dfvalue_unit").hide();
                $("#d-area").attr('lay-verify', 'required');
            }  else if (dtype == 'decimal' || dtype == 'float' || dtype == 'int') {
                $("#dfvalue").hide();
                $("#dfvalue_unit").show();
                $("#d-area").attr('lay-verify', '');
            } else {
                $("#dfvalue").hide();
                $("#dfvalue_unit").hide();
                $("#d-area").attr('lay-verify', '');
            }
        });
    });

    $(function () {

    });
</script>
</body>
</html>